<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A Bar chart with a dotted and dashed background grid</title>
    
    <meta name="description" content="This Bar chart shows a dotted and a dashed background grid. Dotted/dashed lines are currently only supported in Chrome" />
    
</head>
<body>

    <h1>A demo of the Chrome-only dotted or dashed background grid</h1>
    
    <p>
        This uses the relatively new Chrome only addition to canvas from the canvas v5 specification - dotted and dashed lines with
        HTML5 canvas. As browsers add support you will be able to use the option in them too but currently (May 2013) it's only
        supported in Chrome.
    </p>
    
    <pre class="code">
obj.Set('background.grid.dashed', true);
obj.Set('background.grid.dotted', true);
</pre>

    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
    <script>
        $(document).ready(function ()
        {
            var bar = new RGraph.Bar({
                id:'cvs1',
                data: [4,5,3,8,4,9,6,5,3],
                options: {
                    background: {
                        grid: {
                            dashed: true
                        }
                    },
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                    title: 'A dashed background grid',
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).draw();
    
            var bar2 = new RGraph.Bar({
                id: 'cvs2',
                data: [4,5,3,8,4,9,6,5,3],
                options: {
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                    background: {
                        grid: {
                            dotted: true
                        }
                    },
                    title: 'A dotted background grid',
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).draw();
        });
    </script>

</body>
</html>